<template>
  <div><h2>违约管理</h2></div>
  <div class = "container">
    <h2>Registration</h2>
    <label>
      Account:
      <input type="text" minlength="3" maxlength="20" id="account" v-model.trim="user.account" >

    </label>
    <label>
      Username:
      <input type="text" id="username" minlength="3" maxlength="20" v-model.trim="user.username">
    </label>
    <label>
      Password:
      <input type="password" id="password" minlength="3" maxlength="20" v-model.trim="user.password" v-on:keyup="checkInput">
      <span id="error" style="color: red;"></span>
    </label>
    <label>
      Role:
      <select id="role" v-model.trim="user.role">
        <option value="1">Applicant</option>
        <option value="2">Approver</option>
      </select>
    </label>
    <input type="submit" value="Register" @click="register">
  </div>

</template>

<script>
export default {
  name: 'Register',
  data(){
    return {


      user: {
        account: "",
        username:"",
        password: "",
        role: "1"
      },

      applicant: {
        applicantAccount: "",
        applicantName:"",
        applicantPassword: ""
      },

      approver: {
        approverAccount: "",
        approverName:"",
        approverPassword: ""
      }
    }
  },




  methods: {
    async register() {
      if (this.user.role==="1"){
        this.applicant.applicantAccount=this.user.account
        this.applicant.applicantName=this.user.username
        this.applicant.applicantPassword=this.user.password
        const {data: res} = await this.$http.post('/applicant/register' , this.applicant)
        console.log(res.data)

        if (res.data===0){
          alert('注册成功')
          await this.$router.push('/login')
        }else {
          alert('注册失败')
        }
      }

      if (this.user.role==="2"){
        this.approver.approverAccount=this.user.account
        this.approver.approverName=this.user.username
        this.approver.approverPassword=this.user.password
        const {data: res} = await this.$http.post('/approver/register' , this.approver)
        console.log(res.data)

        if (res.data===0){
          alert('注册成功')
          await this.$router.push('/login')
        }else {
          alert('注册失败')
        }
      }


    },

    checkInput() {
      var inputField = document.getElementById('password');
      var errorSpan = document.getElementById('error');
      // 使用正则表达式验证输入格式（只允许字母和数字）
      var pattern = /^[A-Za-z0-9]+$/;
      var inputValue = inputField.value;
      if (pattern.test(inputValue)) {
        // 输入符合要求，清空错误提示
        errorSpan.textContent = '';
      } else {
        // 输入不符合要求，显示错误提示
        errorSpan.textContent = '只允许输入字母和数字';
      }
    }
  },

  function: {

  }

}


</script>

<style lang="less" scoped>
.container {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.container h2 {
  text-align: center;
}

.container label,
.container input[type="submit"] {
  display: block;
  margin-bottom: 10px;
}

.container input[type="text"],
.container input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.container input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.container .btn-container {
  display: flex;
  justify-content: space-between;
}

.container .btn-container input[type="submit"] {
  flex-basis: 48%;
}
</style>
